<template>
    <v-tooltip location="top">
        <template v-slot:activator="{ props }">
            <v-icon
                :color="bColor"
                style="margin: 0 5px 0 5px;"
                icon="mdi-square"
                v-bind="props"
                size="x-large"
                @click="
                    () => {
                        show = true
                    }
                "
            ></v-icon>
        </template>
        颜色选择器
    </v-tooltip>
    <v-dialog
        v-model="show"
        width="auto"
        transition="dialog-top-transition"
        persistent
        absolute
        style="display: flex; justify-content: right"
    >
        <v-card title="颜色选择器">
            <v-card-text>
                <v-color-picker
                    show-swatches
                    v-model="bColor"
                ></v-color-picker>
            </v-card-text>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-icon></v-icon>
                <v-btn
                    text="返回"
                    @click="
                        () => {
                            show = false
                        }
                    "
                ></v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
import { useDesignStore } from '../../../../../../stores/design'
export default {
    name: 'ColorPicker',
    props: {
        attrAttr: Object,
        selectedColor: String,
        colorName: String
    },
    data() {
        return {
            designStore: useDesignStore(),
            show: false,
            bColor: this.selectedColor,
            attr: this.attrAttr
        }
    },
    // computed: {
    //     attr() {
    //         return this.designStore.currentDomPointer.attr
    //     }
    // },
    watch: {
        bColor(v1, v2) {
            if (this.colorName !== 'boxShadow') {
                this.attr.style[this.colorName] = v1
            } else {
                this.attr.style['boxShadow'] = this.attr.style['boxShadow'].replace(/#.*$/, v1 + ' !important')
            }
            this.designStore.rerender()
        }
    },
}

</script>
